<template>
  <div>
    <el-card class="box-card">
      <template #header>
        计划单详情
      </template>
      <el-form :model="info" class="grids columnsLine4 formLine">
        <el-form-item label="盘点单号">
          {{info.inventoryNo}}
        </el-form-item>
        <el-form-item label="供应商">
          <selectSupplier v-model="info.supplierSn" val="supplierSn" readonly="1"></selectSupplier>
        </el-form-item>
        <el-form-item label="盘点工厂">
          <selectFactory v-model="info.factoryId" readonly="1"></selectFactory>
        </el-form-item>
        <el-form-item label="盘点仓库">
          <selectStores v-model="info.storeId" readonly="1"></selectStores>
        </el-form-item>
        <el-form-item label="状态">
          {{counter.idString_format("inventoryStatus",info.status)}}
        </el-form-item>
        <el-form-item label="创建人">
          {{info.createBy}}
        </el-form-item>
        <el-form-item label="创建时间">
          {{info.createTime}}
        </el-form-item>
        <el-form-item label="备注">
          {{info.remark}}
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="box-card">
      <template #header>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="货物名称">
            <el-input v-model="formInline.cargoName" placeholder="请输入货物名称" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">查找</el-button>
            <el-button type="primary" plain @click="dialogVisible=true">新增</el-button>
            <el-button @click="init">重置</el-button>
          </el-form-item>
        </el-form>
      </template>

      <el-table :data="tableParams.rows">
        <el-table-column label="盘点单号" align="center" width="200" prop="inventoryNo" />
        <el-table-column label="货物编码" align="center" width="200" prop="cargoSn" />
        <el-table-column prop="cargoName" label="货物名称" />
        <el-table-column label="库区">
          <template #default="scope">
            <selectStoreRegion v-model="scope.row.storeRegionId" readonly="1"></selectStoreRegion>
          </template>
        </el-table-column>
        <el-table-column label="库位">
          <template #default="scope">
            <selectStoreLocation v-model="scope.row.storeRegionLocationId" readonly="1"></selectStoreLocation>
          </template>
        </el-table-column>
        <el-table-column prop="plannedNum" label="账面数量" />
        <el-table-column prop="num" label="实盘数量" />
        <el-table-column prop="createTime" label="盈亏数量">
          <template #default="scope">
            {{Math.abs(scope.row.plannedNum - scope.row.num)||0}}
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" align="center" fixed="right" width="160">
          <template #default="scope">
            <el-button type="primary" text @click="handClick(scope.row,1)">编辑</el-button>
            <el-button type="primary" text @click="handClick(scope.row,2)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <Pagination v-if="tableParams['total']" :total="tableParams['total']" v-model:page="formInline.pageNum" v-model:limit="formInline.pageSize" @pagination="getInfo" />
    </el-card>

    <el-dialog v-model="dialogVisible" title="新增/编辑" width="1000" :before-close="handleClose">
      <el-form :model="form" label-width="100" ref="formEl">
        <el-form-item label="货物名称" prop="cargoSn">
          <div class="cargoSn" style="width:100%" @click="innerVisible=true">
            <el-input v-model="form.cargoSn" placeholder="请选择货物名称" />
          </div>
        </el-form-item>
        <el-form-item label="货物编码">
          <el-input placeholder="请输入货物名称" clearable disabled v-model="form.cargoName" />
        </el-form-item>
        <el-form-item label="库区">
          <selectStoreRegion v-model="form.storeRegionId" disabled></selectStoreRegion>
        </el-form-item>
        <el-form-item label="库位">
          <selectStoreLocation v-model="form.storeRegionLocationId" disabled></selectStoreLocation>
        </el-form-item>
        <el-form-item label="账面数量">
          <el-input placeholder="请输入单位" clearable disabled v-model="form.plannedNum" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="submitForm" :loading="loading">
            确 认
          </el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog v-model="innerVisible" width="850" title="货物列表" append-to-body>
      <el-table :data="cargos" @row-click="rowClick">
        <el-table-column prop="cargoName" label="货物" fixed="left" />
        <el-table-column prop="batchNumber" label="批次号" width="150" />
        <el-table-column prop="cargoSn" label="货物编码" width="180" />
        <el-table-column prop="cargoSpec" label="规格" />
        <el-table-column prop="cargoUnit" label="单位">
          <template #default="scope">
            <selectUnit v-model="scope.row.cargoUnit" readonly="1"></selectUnit>
          </template>
        </el-table-column>
        <el-table-column prop="factoryName" label="工厂" />
        <el-table-column prop="storeName" label="仓库" />
        <el-table-column prop="storeRegionName" label="库区" />
        <el-table-column prop="storeRegionLocationName" label="库位" width="180" />
        <el-table-column prop="trayName" label="托盘" width="150" />
        <el-table-column prop="totalNum" label="库存" width="80" fixed="right" align="center" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
import useCounterStore from "@/store/counter";
const counter = useCounterStore();
const { proxy } = getCurrentInstance();

//data
let loading = ref(false);
let planId = null;
let info = ref({});
let formInline = ref({
  pageNum: 1,
  pageSize: 10,
  cargoName: "",
});
let cargos = ref([]);
let dialogVisible = ref(false);
let form = ref({
  inventoryNo: "",
  cargoId: "",
  cargoSn: "",
  cargoName: "",
  cargoUnit: "",
  plannedNum: "",
  storeRegionId: "",
  storeRegionLocationId: "",
});
let tableParams = ref({});
let innerVisible = ref(false);

onMounted(() => {
  if (route.query.id) {
    planId = route.query.id;
    getPlanDetails();
  }
  search();
});

//methods
let getPlanDetails = async () => {
  let { data } = await proxy.$apis.inventoryPlanDetails(planId);
  info.value = data;
  //console.log("详情", data);
  getCanSelectCargo();
};
let getCanSelectCargo = async () => {
  let { data } = await proxy.$apis.queryTransferList({
    outFactoryId: info.value.factoryId,
    outStoreId: info.value.storeId,
  });
  cargos.value = data;
  console.log("查询货物", cargos.value);
};
let search = () => {
  formInline.value.pageNum = 1;
  getInfo();
};
let getInfo = async () => {
  tableParams.value = await proxy.$apis.inventoryPlanDetailsList(
    formInline.value
  );
};
let handleClose = () => {
  form.value = {
    inventoryNo: "",
    cargoId: "",
    cargoSn: "",
    cargoName: "",
    cargoUnit: "",
    plannedNum: "",
    storeRegionId: "",
    storeRegionLocationId: "",
  };
  proxy.$refs.formEl.resetFields();
  getInfo();
  dialogVisible.value = false;
};
let init = () => {
  formInline.value = {
    pageNum: 1,
    pageSize: 10,
    cargoName: "",
  };
  getInfo();
};
let submitForm = async () => {
  await proxy.$refs.formEl.validate((valid, fields) => {
    if (valid) {
      save();
    } else {
      for (let key in fields) {
        return proxy.$utils.showToast(fields[key][0].message, 0);
      }
    }
  });
};
let save = async () => {
  try {
    loading.value = true;
    form.value.inventoryNo = info.value.inventoryNo; //盘点单号
    if (form.value.id) {
      await proxy.$apis.inventoryPlanDetailsPut(form.value);
    } else {
      //新增
      await proxy.$apis.inventoryPlanDetailsAdd(form.value);
    }
    proxy.$utils.showToast("操作成功");
    handleClose();
  } catch (error) {
  } finally {
    loading.value = false;
  }
};
let handClick = async (row, num) => {
  switch (num) {
    case 1:
      form.value = proxy.$utils.formatFunction(row, { ...form.value });
      form.value.id = row.id;
      dialogVisible.value = true;
      break;
    case 2:
      let resp = await proxy.$utils.confirmTips("是否确定删除?");
      if (!resp) return;
      await proxy.$apis.inventoryPlanDetailsDel(row.id);
      proxy.$utils.showToast("删除成功");
      getInfo();
      break;
    default:
      break;
  }
};
let rowClick = (row, column, event) => {
  form.value.cargoId = row.cargoId;
  form.value.cargoSn = row.cargoSn;
  form.value.cargoName = row.cargoName;
  form.value.cargoUnit = row.cargoUnit;
  form.value.storeRegionId = row.storeRegionId;
  form.value.storeRegionLocationId = row.storeRegionLocationId;
  form.value.plannedNum = row.totalNum;
  innerVisible.value = false;
};
</script>

<style lang="scss" scoped>
.box-card {
  margin: 20px;
  .formLine {
    gap: 0px 12px;
    .el-form-item {
      margin-bottom: 0;
    }
  }
}
</style>
